<template>
<el-container>
    <el-header class="mianbaoxie">
    <el-breadcrumb
              separator-class="el-icon-arrow-right"
              class="man-el"
            >
              <el-breadcrumb-item :to="{ path: '/thi' }"
                >第三方管理</el-breadcrumb-item
              >
              <el-breadcrumb-item>ETC申请</el-breadcrumb-item>
            </el-breadcrumb>
    </el-header>
    <el-main>
        <el-input placeholder="请输入要查询客户名，手机号或者车牌" v-model="input" clearable class="shuruk">
            </el-input
            ><el-button type="primary" @click="etc" >查询</el-button>
            <div><el-button type="primary"   class="el-icon-plus" @click="daochu">导出全部数据</el-button></div>
            <table class="thad">
            <thead>
              <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>车牌号</th>
                <th>是否是京籍</th>
                <th>地址</th>
                <th>申请时间</th>
                <th>银行名称</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in nowtableaut || userwlist" :key="item.id" @selection-change="handleSelectionChange">
                
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.phoneNumber }}</td>
                <td>{{ item.carNumber }}</td>
                <td>{{ item.nativePlace}}</td>
                <td>{{ item.address }}</td>
                <td>{{ item.applicationTime }}</td>
                <td>{{ item.bankName }}</td>
              </tr>
            </tbody>
          </table>
          <!-- 预览弹窗表格 -->
          <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
            <el-table :data="nuerlist" id="selectTable" height="380px">
                <el-table-column
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                >
                </el-table-column>
               
                    <el-table-column
                            prop="phoneNumber"
                            label="手机号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="carNumber"
                            label="车牌号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="nativePlace"
                            label="是否是京籍"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                    >
                    
                </el-table-column>
                <el-table-column
                            prop="applicationTime"
                            label="申请时间"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="bankName"
                            label="银行名称"
                    >
                    </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">确定保存</el-button>
            </div>
        </el-dialog>

          <el-col :span="8" :offset="8">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10,20,30]"
              :page-size="pagesize"
              layout="total, prev, pager, next, jumper"
              :total="nuerlist.length"
            >
            </el-pagination>
          </el-col>
    </el-main>
 </el-container>
</template>

<script>
import htmlToExcel from "@/excel/htmlToExcel.js"
export default {
 data() {
    return {
      
      usetlist:[],
      currentPage4: 1, //当前显示第几页
      pagesize: 6, //一页显示6条
      input:'' , //搜索查询的输入框
      nuerlist: [
       
      ],
      // 表格中选中的数据
      selectData:[],
      selectWindow:false,
      
    };
  },
  props: {
    id: {
      type: String,
      default: "Table",
    },
    name: {
      type: String,
      default: "Table",
    },
  },
   computed: {
    userwlist(){
  return this.input ? this.nuerlist.filter(item=>{
 return ( item.name).indexOf(this.input)>-1 
  }):this.nuerlist
  },
    // 分页
    nowtableaut() {
      return (
        this.nuerlist.slice(
          (this.currentPage4 - 1) * this.pagesize,
          this.currentPage4 * this.pagesize
        ) || [this.userwlist]
      )
      
      ;
      
     
    },
    
  },
  
  
  methods: {
    // 导出模块
    
    daochu(){
     if (this.nuerlist.length < 1){
                    this.$message.error('请选择要导出的内容！');
                    return false;
                }
                this.selectWindow = true;
    },
     handleSelectionChange(val) {
                this.nuerlist = val;
            },
             exportExcel() {
                htmlToExcel.getExcel('#selectTable','导出的自定义标题')
            },
  
    
    
     formData(now){
      const date = new Date(now)
      var y = date.getFullYear() // 年份
      var m = date.getMonth() + 1 // 月份，注意：js里的月要加1
      var d = date.getDate() // 日
      var h = date.getHours() // 小时
      var min = date.getMinutes() // 分钟
      var s = date.getSeconds() // 秒
	 // 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了 
      return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s

     },





    onSubmit() {
      this.$router.push("/addinsurancecompany")
    },
    handleSizeChange(currentPage1) {
      this.pagesize = currentPage1;
      console.log(`每页 ${currentPage1} 条`);
    },
    handleCurrentChange(currentPage4) {
      this.currentPage4 = currentPage4;
      console.log(`当前页: ${currentPage4}`);
    },
    etc(){
      console.log(String(this.input));
      this.$axios({
         url:"/ETCApplication/list",
         method:'post',
         params:{
          page: Number(this.currentPage4) ,
          limit:Number(this.pagesize) ,
          name:String(this.input) ,
         
         }
      }).then(res=>{
        console.log(res);
        this.nuerlist=[]
        this.nuerlist=res.data.data
      })
    }
  },
  created(){
  this.$axios({
    url:'/ETCApplication/list',
    method:"post",
  }).then(res=>{
    console.log(res.data);
    
    if(res.data.code==0){
      this.nuerlist=[] 
      this.nuerlist=res.data.data
      
      this.nuerlist.forEach(item => {
        if(item.nativePlace==true){
          item.nativePlace='是'
        }else{
          item.nativePlace='否'
        }
        
        item.applicationTime=this.formData(item.applicationTime)
      });
  
    }
     
    
  })
},
 
}
</script>

<style lang="less" scoped>
 .mianbaoxie{
  border-bottom: 1px solid rgb(68, 66, 66);
 
 }
  .man-el{
    height: 60px;
    line-height: 60px;
    font-size: 20px;
 }
 .shuruk{
    width: 300px;
    margin-right: 20px;
 }.el-icon-plus{
  width: 150px;
  margin-top: 20px;
 }
 .thad{
    width: 100%;
     text-align: center;
line-height: 50px;
 }
 
.thad th,
.thad td{
    border: 1px solid rgba(119, 117, 117, 0.192);
    border-left: 0px;
    border-right:0px;
    border-top:0px
}
</style>